<template>
	<!-- 订单-外送 -->
	<view class="OutwardDelivery">
		<view class="take-out">
			<view class="main-item" v-for="item in arr" :key="item.id">
				<view class="main-item-header flexjcsb">
					<view class="main-item-header-title">
						<view class="">
							<image :src="item.titleImage" mode=""></image>
						</view>
						<view class="title-main">
							<view class="">
								<view class="title-main-title">
									{{item.title}}
								</view>
								<view class="title-main-preferential">
									<view class="flexjcc">
										满30减10
									</view>
									<view class="flexjcc">
										满30减10
									</view>
								</view>
							</view>
							<view class="">
								<text
									:class="item.status == 0 ? 'ash' : 'orange'">{{item.status == 0 ? '已完成' : item.status == 1 ? '待支付' : item.status == 2 ? '骑手正在送货中' : item.status == 3 ? '退款成功' : '商家已接单'}}</text>
								<text>></text>
							</view>
						</view>

					</view>

				</view>
				<view class="main-item-footer flexjcsb">
					<view class="commodity">
						<view class="commodity-item">
							<view class="">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="commodity-item-title">
								{{item.title}}
							</view>
						</view>
						<view class="commodity-item">
							<view class="">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="commodity-item-title">
								{{item.title}}
							</view>
						</view>
					</view>
					<view class="priceNum">
						<view class="">
							￥<text>{{item.price}}</text>
						</view>
						<view class="">
							共 <text>{{item.num}}</text> 件
						</view>
					</view>
				</view>
				<view class="main-item-button">
					<view class="" v-if="item.status == 0">
						<view class="AnotherOrder flexjcc">
							在来一单
						</view>
						<view class="solid flexjcc last" @click.native="JumpEvaluate">
							去评价
						</view>
					</view>
					<view class="" v-if="item.status == 1">
						<view class="solid flexjcc last">
							去支付
						</view>
					</view>
					<view class="" v-if="item.status == 2">
						<view class="AnotherOrder flexjcc">
							在来一单
						</view>
						<view class="solid flexjcc last">
							联系骑手
						</view>
					</view>
					<!-- <view class="" v-if="item.status == 3">
						<view class="AnotherOrder flexjcc last">
							再来一单
						</view>
					</view>
					<view class="" v-if="item.status == 4">
						<view class="AnotherOrder flexjcc last">
							再来一单
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				arr: [
					// 0 已完成，1 待支付，2 骑手正在送货中，3 退款成功，4 商家已接单
					{
						id: '1',
						titleImage: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '安小姐的面包',
						price:'29.8',
						num:'2',
						image: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '芒果超人面面包',
						status: 0,
					},{
						id: '2',
						titleImage: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '安小姐的面包',
						price:'29.8',
						num:'2',
						image: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '芒果超人面面包',
						status: 1,
					},
					{
						id: '2',
						titleImage: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '安小姐的面包',
						price:'29.8',
						num:'2',
						image: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '芒果超人面面包',
						status: 2,
					},
					{
						id: '3',
						titleImage: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '安小姐的面包',
						price:'29.8',
						num:'2',
						image: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '芒果超人面面包',
						status: 3,
					},
					{
						id: '4',
						titleImage: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '安小姐的面包',
						price:'29.8',
						num:'2',
						image: 'https://img2.baidu.com/it/u=373805894,1655627384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						title: '芒果超人面面包',
						status: 4,
					},
				]
			}
		},
		methods: {
			// 跳转去评价
			JumpEvaluate(){
				uni.navigateTo({
					url:'/pages/Ordergoods/evaluate'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.OutwardDelivery {

		// 外卖大盒子
		.take-out {
			width: 702rpx;
			height: 100%;
			background-color: #FBFBFB;
			margin-left: 23rpx;

			.main-item {
				width: 702rpx;
				// height: 258rpx;
				background: white;
				// background: aqua;
				box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(118, 118, 118, 0.09);
				border-radius: 10rpx;
				margin: auto;
				margin-bottom: 12rpx;
					// 已完成
					.ash {
						color: #888888;
					}
					// 待支付，骑手正在送货中，退款成功，商家已接单
					.orange {
						color: #F14500;
					}
				// 头部
				.main-item-header {
					display: flex;
					// padding: 43rpx 26rpx 26rpx 25rpx;
					padding: 23rpx 26rpx 26rpx 25rpx;

					image {
						width: 90rpx;
						height: 90rpx;
						background: #FFEEE5;
						border-radius: 10rpx;
						margin-right: 15rpx;
					}
					// 标题
					.main-item-header-title {
						display: flex;
						width: 100%;

						.title-main {
							display: flex;
							justify-content: space-between;
							width: 100%;

							.title-main-title {
								font-size: 30rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #2C2C2C;
								padding-bottom: 25rpx;
							}

							.title-main-preferential {
								display: flex;

								view {
									width: 120rpx;
									height: 30rpx;
									border: 1px solid #E54202;
									opacity: 0.52;
									border-radius: 3rpx;
									font-size: 18rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #E54202;
								}

								view:last-child {
									margin-left: 7rpx;
								}
							}
						}
					}
				}

				// 商品展示和价格
				.main-item-footer {
					padding: 0 26rpx 0 26rpx;

					// 商品
					.commodity {
						display: flex;

						.commodity-item {
							width: 118rpx;
							// box-shadow: 0rpx 17rpx 30rpx 0rpx rgba(102,70,8,0.15);
							border-radius: 10rpx;
							margin-right: 16rpx;

							image {
								width: 118rpx;
								height: 100rpx;
							}

							.commodity-item-title {
								font-size: 20rpx;
								// font-weight: 400;
								color: #202020;
								// padding-bottom: 10rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}

					// 价格
					.priceNum {
						text-align: right;

						view:first-child {
							font-size: 24rpx;
							// font-weight: 400;
							color: #373737;
							padding-bottom: 15rpx;

							text {
								font-size: 30rpx;
							}
						}

						view:last-child {
							font-size: 20rpx;
							font-weight: 300;
							color: #888888;
						}
					}
				}

				.main-item-button {
					display: flex;
					justify-content: flex-end;
					margin-top: 18rpx;

					view {
						display: flex;
					}

					.last {
						margin: 0 27rpx 19rpx 14rpx;
					}
					
					// 再来一单按钮
					.AnotherOrder {
						width: 156rpx;
						height: 60rpx;
						border: 1px solid #F14500;
						border-radius: 6rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 300;
						color: #F14500;
					}
					// 去评价，去支付，联系骑手
					.solid {
						width: 155rpx;
						height: 59rpx;
						background: #F14500;
						border-radius: 6rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 300;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>